<template>
    <div>
      <Title :title="title"></Title>
      <div ref="bottom1" style="height: 150px;"></div>
    </div>
  </template>
  
  <script setup>
  import Title from './Title.vue';
  import { ref, onMounted } from 'vue';
  import { Radar } from '@antv/g2plot';
  
  const bottom1 = ref(null);
  const title = ref('噪音监测雷达图');
  
  const loadRadar = () => {
    const data = [
      { indicator: '交通干道', value: 60 },
      { indicator: '居民区', value: 40 },
      { indicator: '工业区', value: 70 },
      { indicator: '公园', value: 30 },
    ];
  
    const radarPlot = new Radar(bottom1.value, {
      data,
      xField: 'indicator',
      yField: 'value',
      color: '#ff66ff',
      label: {
        visible: true,
        position: 'top',
        style: {
          fill: 'white',
        },
      },
      xAxis: {
        label: {
          style: {
            fill: 'white',
          },
        },
      },
      yAxis: {
        label: {
          style: {
            fill: 'white',
          },
        },
      },
      interactions: [{ type: 'element-active' }],
    });
  
    radarPlot.render();
  };
  
  onMounted(() => {
    loadRadar();
  });
  </script>
  
  <style lang="less" scoped></style>